<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<text class="label">收货人</text>
				<input type="text" v-model="form.name" placeholder="请输入收货人姓名" />
			</view>
			
			<view class="form-item">
				<text class="label">手机号</text>
				<input type="number" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
			</view>
			
			<view class="form-item">
				<text class="label">所在校区</text>
				<picker @change="onCampusChange" :value="campusIndex" :range="campusList">
					<view class="picker">
						<text :class="{ placeholder: !form.campus }">{{form.campus || '请选择所在校区'}}</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">详细地址</text>
				<input type="text" v-model="form.address" placeholder="请输入详细地址，如：1号楼203" />
			</view>
			
			<view class="form-item switch">
				<text class="label">设为默认地址</text>
				<switch :checked="form.isDefault" @change="onDefaultChange" color="#2979ff" />
			</view>
		</view>
		
		<view class="submit-btn" @tap="saveAddress">
			保存
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isEdit: false,
			addressId: null,
			campusList: ['东校区', '西校区', '南校区', '北校区'],
			campusIndex: 0,
			form: {
				name: '',
				phone: '',
				campus: '',
				address: '',
				isDefault: false
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.isEdit = true
			this.addressId = options.id
			this.loadAddress()
		}
	},
	methods: {
		loadAddress() {
			// TODO: 调用后端API获取地址详情
			// 模拟数据
			const address = {
				id: this.addressId,
				name: '张三',
				phone: '13800138000',
				campus: '东校区',
				address: '第一教学楼',
				isDefault: true
			}
			
			this.form = address
			this.campusIndex = this.campusList.indexOf(address.campus)
		},
		onCampusChange(e) {
			this.campusIndex = e.detail.value
			this.form.campus = this.campusList[this.campusIndex]
		},
		onDefaultChange(e) {
			this.form.isDefault = e.detail.value
		},
		validateForm() {
			if (!this.form.name) {
				uni.showToast({
					title: '请输入收货人姓名',
					icon: 'none'
				})
				return false
			}
			if (!this.form.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return false
			}
			if (!/^1\d{10}$/.test(this.form.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return false
			}
			if (!this.form.campus) {
				uni.showToast({
					title: '请选择所在校区',
					icon: 'none'
				})
				return false
			}
			if (!this.form.address) {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				})
				return false
			}
			return true
		},
		saveAddress() {
			if (!this.validateForm()) return
			
			uni.showLoading({
				title: '保存中...'
			})
			
			// TODO: 调用后端API保存地址
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				
				// 返回上一页并刷新地址列表
				const pages = getCurrentPages()
				const prevPage = pages[pages.length - 2]
				if (prevPage) {
					prevPage.$vm.loadAddressList()
				}
				uni.navigateBack()
			}, 1000)
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
	padding-bottom: 120rpx;
}

.form {
	background-color: #fff;
	padding: 0 30rpx;
	margin-top: 20rpx;
	
	.form-item {
		display: flex;
		align-items: center;
		min-height: 100rpx;
		border-bottom: 1rpx solid $border-color;
		
		&:last-child {
			border-bottom: none;
		}
		
		.label {
			width: 160rpx;
			font-size: 28rpx;
			color: $text-color;
		}
		
		input {
			flex: 1;
			font-size: 28rpx;
		}
		
		.picker {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			text {
				font-size: 28rpx;
				color: $text-color;
				
				&.placeholder {
					color: $text-color-grey;
				}
			}
		}
		
		&.switch {
			justify-content: space-between;
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $theme-color;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}
</style> 